Для каких целей грид и флекс
Мы не хотим противопоставлять эти две технологии, но без сравнений не обойтись.
Игра тренажер по grid
Пройдите игру для наглядного понимания grid технологии.
Основные термины
CSS Grid Layout — система, созданная для построения сетки сразу в двух пространствах: по горизонтали и вертикали.
display: grid;
display: inline-grid ;
display: inline-grid ;
Создать грид контейнер
Чтобы превратить элемент в грид-контейнер, нужно задать ему значение свойства display: grid;
grid-template-columns:
grid-template-rows:
grid-template-rows:
Столбцы и строки внутри грид контейнера
Грид-контейнер, сам по себе он не решает как элементы будут раставленны. Элементы внутри него сами себя не выстроят. Нужно указать, где им находиться.
grid-template-rows: [aside-start]
grid-template-columns: [aside-start]
grid-template-columns: [aside-start]
Задать имя колонки, строки
Чтобы каждый раз не считать линии, им можно давать имена. Цифровые названия линий останутся доступными. Имена линиям указывают в квадратных скобках на этапе создания строк и столбцов
row-gap:
column-gap:
row-gap:
column-gap:
row-gap:
Создание отступов
Чтобы добавить отступ элементам грид разработчики гридов придумали решение — свойство gap
grid-template-columns: repeat()
grid-template-rows: repeat()
grid-template-rows: repeat()
Функция repeat (сокращение для колонок и столбцов)
Чтобы не писать каждый раз одно и то же значение для свойств grid-template-columns и grid-template-rows , придумали свойство repeat .
fr
Единица измерения: фракция
Фракция — единица доступного пространства, которое можно разделить на сколько угодно частей.
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
Расположение элементов в грид-контейнере
Представьте, что какой-то из элементов, например, картинка, должен занимать не одну ячейку, а несколько. Ну потому что так красивее. Гриды справятся с этой задачей как никто другой — помогут грид-линии.
grid-column-start: 2;
grid-column-end: span 2;
grid-row-start: span 2;
grid-row-end: 3;
grid-column-end: span 2;
grid-row-start: span 2;
grid-row-end: 3;
Количество строк, столбцов которое занимает элемент
Имя линии может быть любым, кроме ключевого слова span . Словом span указывают, какое количество строк или столбцов должен занимать элемент до или после какой-то линии.
grid-template-areas:
grid-area:
grid-area:
Грид-области
Для того, чтобы разделить грид-контейнер со строками и столбцами на области, разработчики придумали свойство grid-template-areas .
grid-auto-rows:
grid-auto-columns:
grid-auto-columns:
Размер строк, которые не поместились в явную разметку
Cвойства управления размерами: grid-auto-rows для неявных строк и grid-auto-columns для столбцов. Их задают грид-контейнеру так же, как параметры явных треков.
grid-auto-flow: column
grid-auto-columns
grid-auto-columns
Неявные столбцы вместо строк
Чтобы вместо строк добавлялись неявные столбцы, нужно свойству grid-auto-flow поменять значение на column . По умолчанию его значение row .
grid-auto-flow: dense
Заполнить пробелы в сетки при появление новых элементов
Значение dense . помогает заполнять пробелы в сетке, которые появляются из-за разных размеров элементов.
auto-fill
auto-fit
minmax()
auto-fit
minmax()
Адаптивный каркас сайта
Так auto-fit и minmax создают адаптивный каркас сайта.Так колонки не разорвёт от контента: нет жёстких границ, в которые он обязан уместиться.
minmax()
Минимальный и максимальный размер ячейки
minmax() функция имеет два параметра: минимальный размер min и максимальный max . Трек или элемент с таким размером растягивается и сжимается в пределах этих значений.
max-content
min-content
min-content
Размер содержимого ячейки
Значение max-content сообщает строке или столбцу: «Будь такой ширины, чтобы вмещать содержимое без переносов и максимально компактно, без свободного пространства по краям».
fit-content
Резиновая ячейка
Трек с fit-content ориентируется на контент, но всегда стремится к указанному в нём значению. Колонка занимает ширину под размер своего контента.
justify-items
align-items
justify-content
align-content
align-items
justify-content
align-content
Выравнивание содержимого строк и колонок
Вы уже выравнивали элементы во флексбоксах. В гридах разработчики не стали изобретать велосипед, поэтому работают те же самые свойства.
justify-self
align-self
align-self
Выравнивание элементов
Гриды позволяют выравнивать и отдельные элементы: свойством justify-self по горизонтальной оси и align-self по вертикальной. Похожие свойства есть во флексбоксах.
z-index
Наложение элементов
Наложение элементов помогает создавать декоративные эффекты. Это умение полезно, когда нужно переместить блоки, не трогая разметку.